<template>
  <view>
    <view class="w-638rpx m-a">
      <view class="flex-sb-center font-size-28rpx color-#666 mt-36rpx"
        v-for="item in list"
        :key="item.id"
      >
        <text>{{ item.amount }}</text>
        <text>{{ formatDate(new Date(item.operateTime)) }}</text>
      </view>
    </view>
    
    <!-- 骨架屏 - 加载中 -->
    <view class="w-638rpx m-a" v-if="status === 'loading' && !list.length">
      <view class="mt-36rpx">
        <wd-skeleton animation="gradient" theme="text" />
      </view>
    </view>
    
    <!-- 没有数据 -->
    <wd-status-tip 
      v-if="!list.length && status === 'finished'" 
      image="search" 
      tip="当前没有充值记录"
    />
    
    <!-- 加载更多 -->
    <wd-loadmore 
      v-if="status === 'error' || (status !== 'normal' && status !== 'more' && list.length > 5)" 
      :state="status" 
      finished-text="没有更多了" 
      loading-text="加载中..."
      @reload="getList"
    />
  </view>
</template>

<script lang="ts" setup>
import { UserRechargeRecordInfoPage } from '@/service/db_feature';
import { formatDate } from "@/utils";

const props = defineProps({
  userId: {
    type: String,
    default: ''
  },
})

const {
  list, 
  status,
  pagination,
  getList,
  reLoadList
} = useList({
  getApi: UserRechargeRecordInfoPage,
  _query: {
    pageSize: 20,
  },
  setParams: () => {
    pagination.userId = props.userId;
  },
});

defineExpose({
  getList,
  reLoadList
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
</style>
